import 'dart:async';

import 'package:flutter/material.dart';

class CarouselChart extends StatefulWidget {
  const CarouselChart({super.key});

  @override
  State<CarouselChart> createState() => _CarouselChartState();
}

class _CarouselChartState extends State<CarouselChart> {
  late Timer _timer;

  late PageController _pageController;

  var Pageindex = 0;

  var num = 0;

  var m = 0;
  var v = 0;

  var pages = [
    {"color": Colors.pink[200], "title": '1'},
    {"color": Colors.yellow[200], "title": '2'},
    {"color": Colors.blue[200], "title": '3'}
  ];

  void _startTime() {
    _timer = Timer.periodic(Duration(seconds: 3), (Timer) {
      _pageController.nextPage(
          duration: Duration(milliseconds: 300), curve: Curves.linear);
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pageController = PageController();
    _startTime();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    double scrW = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        margin: EdgeInsets.all(20),
        child: Stack(
          children: [
            Container(
              height: 200,
              color: Colors.pink[200],
              child: PageView.builder(
                  controller: _pageController,
                  onPageChanged: (value) {
                    setState(() {
                      Pageindex = value % pages.length;
                      v = value;
                    });
                  },
                  itemBuilder: (BuildContext context, index) {
                    var items = pages[index % pages.length];
                    m = index;
                    return Container(
                      height: 200,
                      color: items["color"] as Color,
                      child: Center(child: Text(items["title"] as String)),
                    );
                  }),
            ),
            Positioned(
              left: (scrW - 40) / 2 - (scrW / 5) / 2,
              bottom: 15,
              child: Container(
                width: scrW / 5,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Cell(0),
                    Cell(1),
                    Cell(2),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  GestureDetector Cell(index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          double p = m / pages.length;
          if (p.truncate() * 3 != index + (p.truncate()) * 3) {
            Pageindex = index + (p.truncate()) * 3;
            _pageController.animateToPage(Pageindex,
                duration: Duration(milliseconds: 300), curve: Curves.linear);
          }
          print(p.truncate());
        });
      },
      child: Container(
        width: 14,
        height: 14,
        decoration: BoxDecoration(
            color: Pageindex == index ? Colors.white : Colors.black,
            borderRadius: BorderRadius.circular(7)),
      ),
    );
  }
}
